<template>
  <div class="fx-time-picker-item">
    <div class="title">{{ title }}</div>
    <div class="picker-list">
      <fx-scroll :list="hourList" timeType="hour" :time="time" :index="Number(currentIndex[0])"
                 :min="minList[0]" :max="maxList[0]"></fx-scroll>
      <fx-scroll :list="minuteList" timeType="min" :time="time" :index="Number(currentIndex[1])"
                 :min="minList[1]" :max="maxList[1]"></fx-scroll>
      <fx-scroll :list="secondList" timeType="sec" :time="time" :index="Number(currentIndex[2])"
                 :min="minList[2]" :max="maxList[2]"></fx-scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref } from 'vue'
import { createList } from '@/base/utils'

interface PickerItemProps {
  title: string;
  time: 'start' | 'end';
  timeFormat: string[];
}

export default defineComponent({
  name: 'pickerItem',
  props: {
    title: {
      type: String as PropType<string>,
      default: ''
    },
    time: {
      type: String as PropType<'start' | 'end'>,
      default: null
    },
    timeFormat: {
      type: Array as PropType<string[]>,
      required: true
    }
  },
  setup (props: PickerItemProps) {
    const hourList = ref<number[]>(createList(24))
    const minuteList = ref<number[]>(createList(60))
    const secondList = ref<number[]>(createList(60))

    const currentIndex = computed<string[]>(() => {
      const index = props.time === 'start' ? 0 : 1
      return props.timeFormat[index].split(':')
    })

    const minList = computed<Array<string>>(() => {
      if (props.time === 'end') return props.timeFormat[0].split(':')
      return ['-1', '-1', '-1']
    })

    const maxList = computed<Array<string>>(() => {
      if (props.time === 'start') return props.timeFormat[1].split(':')
      return ['99', '99', '99']
    })

    return {
      hourList,
      minuteList,
      secondList,
      minList,
      maxList,
      currentIndex
    }
  }
})
</script>
